﻿@model WebUI.Models.IndEditProfileViewModel
@{
    ViewBag.Title = "Account / Profile";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section NotificationContent
{
    @if (!Model.Login.EmailConfirmed)
    {
        <div class="at-notification">
            An email has been sent to your email address (@Model.Login.Email). Please check your email inbox and confirm your email address. Don't receive it? 
            <a href="@Url.Action("SendEmailConfirmation")">Resend confirmation email</a>
        </div>
    }
}

<h1><a href="@Url.Action("EditProfile")">Account</a> / Profile</h1>
<div class="editdes">Edit your avatar, name, personal website, skills etc</div>
<div class="spacer"></div>

<ul class="tabs">
    <li class="active">
        <a href="@Url.Action("EditProfile")">Profile</a>
    </li>
    <li>
        <a href="@Url.Action("EditResume")">Resume</a>
    </li>
    <li>
        <a href="@Url.Action("EditPassword")">Password</a>
    </li>
    @*<li>
        <a href="@Url.Action("EditNotifications")">Notifications</a>
    </li>*@
    <li>
        <a href="@Url.Action("DeleteAccount")">Delete Account</a>
    </li>
</ul>
<div class="tabsbottom"></div>

<div class="mainSection atl">
    <div class="clear"></div>
    @using (Html.BeginForm("EditAvatar", "Ind", FormMethod.Post, new { ID="EditAvatarForm"}))
    { 
        <div class="fl left">Your Avatar</div>
        <div class="fl right">
            <div class="avatar80 fl">
                <img id="avatar-url" class="avatar80" src="@Url.StaticFile(Model.AvatarUrl)" alt="Avatar" width="80" height="80"/>
            </div>
            <div class="vspacer"></div>
            <div class="fl">
                <div><input type="file" name="avatar" class="file-input"/></div>
                <div class="smallspacer"></div>
                <div>Maximum size of 700k. JPG, GIF, PNG.</div>
            </div>
            <div class="fl client-validation-error" id="avatar-error"></div>
            <div class="clear"></div>
        </div>
        <div class="spacer"></div>
        <div class="clear"></div>
        
        <div class="fl left">&nbsp;</div>
        <div class="fl right">
            <input class="blue-submit" type="submit" name="submitAvatar" value="Update now" />
        </div>
        <div class="clear"></div>
        <div class="tabsbottom"></div>
    }

    <div class="clear"></div>
    @using (Html.BeginForm())
    {
        <div class="fl left">Email Address<span>&nbsp;*</span></div>
        <div class="fl right right-text">@Html.DisplayTextFor(m => m.Login.Email)
        </div>
        <div class="clear"></div>
        <div class="fl left">User Name<span>&nbsp;*</span></div>
        <div class="fl right">
            @Html.TextBoxFor(m => m.Login.UserName)
            @Html.ValidationMessageFor(m => m.Login.UserName)
        </div>
        <div class="clear"></div>
        <div class="fl left left-tip">&nbsp;</div>
        <div class="fl right right-tip">Your Juicybasket URL: http://juicybasket.com/user/<strong>USERNAME</strong></div>
        <div class="clear"></div>
        <div class="smallspacer"></div>
        <div class="fl left">First Name<span>&nbsp;*</span></div>
        <div class="fl right">
            @Html.TextBoxFor(m => m.Ind.FirstName)
            @Html.ValidationMessageFor(m => m.Ind.FirstName)
        </div>
        <div class="clear"></div>
        <div class="smallspacer"></div>
        <div class="fl left">Last Name<span>&nbsp;*</span></div>
        <div class="fl right">
            @Html.TextBoxFor(m => m.Ind.LastName)
            @Html.ValidationMessageFor(m => m.Ind.LastName)
         </div>
        <div class="clear"></div>
        <div class="smallspacer"></div>
        <div class="fl left">Title<span>&nbsp;*</span></div>
        <div class="fl right">
            @Html.TextBoxFor(m => m.Ind.Title)
            @Html.ValidationMessageFor(m => m.Ind.Title)
        </div>
        <div class="clear"></div>
        <div class="fl left left-tip">&nbsp;</div>
        <div class="fl right right-tip">e.g. "Senior Graphic Designer" or "Art Director"</div>
        <div class="clear"></div>
        <div class="smallspacer"></div>
        <div class="fl left">Location<span>&nbsp;*</span></div>
        <div class="fl right">
            @Html.TextBoxFor(m => m.Ind.Location)
            @Html.ValidationMessageFor(m => m.Ind.Location)
        </div>
        <div class="clear"></div>
        <div class="fl left left-tip">&nbsp;</div>
        <div class="fl right right-tip">e.g. "Los Angeles, CA" or "London, UK"</div>
        <div class="clear"></div>
        <div class="smallspacer"></div>
        <div class="fl left">Your Website</div>
        <div class="fl right">
            @Html.TextBoxFor(m => m.Ind.PersonalUrl)
            @Html.ValidationMessageFor(m => m.Ind.PersonalUrl)
        </div>
        <div class="clear"></div>
        <div class="fl left left-tip">&nbsp;</div>
        <div class="fl right right-tip">Your home page, blog or company site (http or https required)</div>
        <div class="clear"></div>
        <div class="smallspacer"></div>
        <div class="fl left">Twitter</div>
        <div class="fl right">
            @Html.TextBoxFor(m => m.Ind.Twitter)
            @Html.ValidationMessageFor(m => m.Ind.Twitter)
        </div>
        <div class="clear"></div>
        <div class="fl left left-tip">&nbsp;</div>
        <div class="fl right right-tip">Your username in twitter</div>
        <div class="clear"></div>
        <div class="smallspacer"></div>
        <div class="fl left">Bio</div>
        <div class="fl right">
            @Html.TextAreaFor(m => m.Ind.Bio)
            @Html.ValidationMessageFor(m => m.Ind.Bio)
        </div>
        <div class="clear"></div>
        <div class="fl left left-tip">&nbsp;</div>
        <div class="fl right right-tip"><span id="bio_totalchars"></span>&nbsp;(Html tag is <em>not</em> allowed)</div>
        <div class="clear"></div>
        <div class="smallspacer"></div>
        <div class="fl left">Availability</div>
        <div class="fl right">
            <div class="smallspacer"></div>
            <div class="minispacer"></div>
            @Html.CheckBoxFor(m => m.Ind.AvailableForHire) Are you available for hire?
        </div>
        <div class="clear"></div>
        <div class="fl left left-tip">&nbsp;</div>
        <div class="fl right right-tip">If you uncheck this box, your resume will not be shown to public, "Hire me" button will not be visible <br/>and your profile will not be listed in search results   </div>
        <div class="clear"></div>
        <div class="spacer"></div>
        <div class="fl left">&nbsp;</div>
        <div class="fl right">
            <input class="blue-submit" type="submit" name="submitProfile" value="Save changes" />
        </div>
        <div class="clear"></div>
    }

    <div class="clear"></div>
    <div class="tabsbottom"></div>
    <div class="clear"></div>

    <div class="fl left">Your <strong>skills</strong></div>
    <div class="fl right">
        <div id="skilltags">
            @foreach (var skill in Model.SkillList)
            {
                <div id="skill-@skill.SkillID" class="tag">
                    <span>@skill.Name</span>
                    <a class="delete-tag" title="remove this skill" href=""></a>
                </div>
            }
        </div>
        <div class="smallspacer"></div>
        <div class="clear"></div>
        @using (Html.BeginForm("AddSkill", "Ind", FormMethod.Post, new { ID = "AddSkillForm" }))
        {
            <div><input type="text" name="Skill.Name" /></div>
            
            <div class="right-tip">Add up to 10 skills, max 32 characters for each. e.g. "ui design", "html5", "css3"</div>
            <div class="client-validation-error" id="addskill-error"></div>
            <div class="minispacer"></div>
            <div><input class="blue-submit" type="submit" name="submitSkill" value="Add" /></div>
        }
        <div class="clear"></div>

    </div>
        
    <div class="clear"></div>

</div>

@section FooterContent
{
    <script type="text/javascript" src="@Url.StaticFile("~/content/jquery.form.js")"></script>
    <script type="text/javascript">

        $(function () {
            textAreaCharsRemaining("Ind_Bio", "bio_totalchars", 200);

            //avatar form
            $("#EditAvatarForm").ajaxForm({
                beforeSubmit: function (a, f, o) {
                },
                dataType: 'json',
                success: ProcessAvatar,
                error: function (request, status, errorThrown) {     // error during save, display error
                    //alert(request.responseText);
                    return false;
                }
            });

            //add skill form
            $("#AddSkillForm").ajaxForm({
                beforeSubmit: function (a, f, o) {
                },
                dataType: 'json',
                success: ProcessAddSkill,
                error: function (request, status, errorThrown) {     // error during save, display error
                    //alert(request.responseText);
                    return false;
                }
            });

            $(".delete-tag").live("click", function () {
                var parentID = $(this).parent().attr("id");
                var index = parentID.indexOf("-");
                var skillID = parentID.substring(index + 1);
                $.ajax({
                    type: "POST",
                    url: "/ind/deleteskill",
                    data: "skillID=" + skillID,
                    success: function (data) {
                        if (data.Success == 1) {
                            $("#" + parentID).remove();
                        }
                        return false;
                    },
                    error: function (request) {
                        return false;
                    }
                })
                return false;
            })
        })

        function ProcessAvatar(data) {
            JsonResultUploadFileHandler.Success(data);
            if (data.Success == 1) {
                $("#avatar-url").attr("src", data.FilePath);
            }
        }

        function ProcessAddSkill(data)
        {
            if (data.Success == 1) {
                $("#addskill-error").html("");
                if (data.SkillID > 0) {
                    var template =
                        '<div id="skill-{0}" class="tag">' +
                            '<span>{1}</span>' +
                            '<a class="delete-tag" title="remove this skill" href=""></a>' +
                        '</div>';
                    var html = template.replace("{0}", data.SkillID).replace("{1}", data.Name);
                    $("#skilltags").append(html);
                }
                $("input[name='Skill.Name']").val("");
            }
            else
            {
                $("#addskill-error").html(data.Message);
            }
        }
        
    </script>
}


